<template>
  <el-dialog
      :title="id?'修改角色':'新增角色'"
      :visible.sync='show'
      width='30%'
      @open="handlerOpen"
      :before-close='handlerBeforeClose'
      @close="handlerBeforeClose">
    <el-form
        :model='roleForm'
        ref='roleForm'
        :rules='roleFormRules'
        label-width='130px'
        size='medium'>
      <el-form-item label='角色名称' prop='name'>
        <el-input v-model="roleForm.name" placeholder="角色名称"/>
      </el-form-item>
      <el-form-item label='菜单授权'>
        <el-tree :data="resourceTreeList"
                 :props="defaultProps"
                 ref="resourceTree"
                 node-key="id"
                 highlight-current
                 accordion
                 show-checkbox
                 @current-change="handlerResourceChange">
        </el-tree>
      </el-form-item>
      <el-form-item label='备注' prop='remark'>
        <el-input type="textarea" v-model="roleForm.remark"/>
      </el-form-item>
    </el-form>
    <div class='footer'>
      <el-button size='medium' type='primary' @click='handlerBeforeClose'>取消</el-button>
      <el-button size='medium' type='success' @click='handlerSubmitForm'>保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { statusEnum } from '@/enums/CommonEnum'
import RoleApi from '@/apis/system/RoleApi'
import ResourceApi from '@/apis/system/ResourceApi'

export default {
  name: 'RoleDialog',
  props: {
    show: {
      type: Boolean,
      require: false,
      default: false
    },
    id: {
      type: Number | String,
      required: false
    },
  },
  data () {
    return {
      statusEnum: statusEnum,
      resourceTreeList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      roleForm: {
        name: null,
        status: 0,
        remark: null,
        resourceIdList: []
      },
      roleFormRules: {
        name: { required: true, message: '角色名称不能为空', trigger: 'blur' },
      }
    }
  },
  computed: {
    size () {
      return this.$store.getters['ElementUI/getSize']
    },
  },
  watch: {
    id (newVal) {
      if (newVal) {
        this.handlerSelectById(this.id)
      }
    },
  },
  methods: {
    /**
     * 当前选中节点变化时触发的事件
     * @param data
     */
    handlerResourceChange (data) {
      this.resourceForm.parentName = data.name
      this.resourceForm.parentId = data.id
      // 关闭菜单树popover
      this.$refs.resourceRef.doClose()
    },
    /**
     * 查询资源树结构数据
     * @returns {Promise<void>}
     */
    async handlerSelectResourceTreeList () {
      const res = await ResourceApi.selectResourceTreeList({})
      this.resourceTreeList = res.data
    },
    async handlerSelectById (id) {
      const res = await RoleApi.selectById(id)
      if (res.code === '0') {
        this.roleForm = res.data
      } else {
        this.$message.error(res.messsage)
      }
    },
    handlerOpen () {
      this.handlerSelectResourceTreeList()
    },
    /**
     * dialog关闭
     */
    handlerBeforeClose () {
      this.roleForm = this.$options.data().roleForm

      this.$emit('close')
    },
    handlerSubmitForm () {
      this.$refs.roleForm.validate((valid) => {
        if (!valid) {
          setTimeout(() => {
            const isError = document.getElementsByClassName('is-error')
            isError[0].querySelector('input').focus()
          }, 100)
          return false
        }

        if (this.id) {
          this.handlerUpdate()
        } else {
          this.handlerCreate()
        }
      })
    },
    async handlerCreate () {
      const res = await RoleApi.create(this.roleForm)
      if (res.code === '0') {
        this.$emit('close')
      } else {
        this.$message.error(res.messsage)
      }
    },
    async handlerUpdate () {
      const res = await RoleApi.update(this.roleForm)
      if (res.code === '0') {
        this.$emit('close')
      } else {
        this.$message.error(res.messsage)
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.el-dialog {
  .footer {
    text-align: center;
  }

  .el-select {
    width: 100%;
  }
}
</style>
